<template>
  <div class="page-box">
    <TopNav title="PayPassword.zfmmsz" show_left="true"></TopNav>
    <div class="bink_card" v-if="haspasswrod">
        <ul class="bink_card_ul">
            <li>
                <h4 style="width: 100%;color:red">{{ $t('PayPassword.gxndzfmmyjsz') }}</h4>
            </li>
        </ul>
    </div>
    <div class="bink_card" v-else>
      <h3>{{ $t('PayPassword.szndzfmm') }}</h3>
      <ul class="bink_card_ul">
        <li>
          <h4 style="width: 100%;color:red">{{ $t('PayPassword.qrzszndzfmm') }}</h4>
          <h4 style="width: 100%;color:red">{{ $t('PayPassword.szwchbnxg') }}</h4>
        </li>
        <li>
            <div><h4>{{ $t('PayPassword.dlmm') }}</h4></div>
          <input  type="password" placeholder="$t('PayPassword.qsrnddlmm')" v-model='password'>
        </li>
        
        
        
      </ul>
      <div v-if="loading" style="text-align: center;">
      <van-loading>{{ $t('PayPassword.dqjl') }}...</van-loading>
    </div>
    <nut-shortpassword 
    :visible="isShow"
    @close="shortpwdClose"
    type="center"
    ></nut-shortpassword>
    <nut-shortpassword 
    :visible="isShow2"
    @close="shortpwdClose2"
    type="center"
    ></nut-shortpassword>
    <button :disabled="loading"  @click="showShortpwd" class="btn">{{ $t('PayPassword.szzfmm') }}</button>
    </div>
    
  </div>
</template>

<script>
import MainNav from "../components/MainNav";
import TopNav from "../components/TopNav";

export default {
  name: 'AlipayPage',
    components: {MainNav,TopNav},
    data () {
    return {
        loading:false,
        isShow: false,
        isShow2: false,
        user:{},
        user_data:{
            alipay_account: '',
            alipay_name: '',
        },
        haspasswrod: true,
        password:'',
        paypassword1:'',
        paypassword:'',
    }
  },
    methods:{
        shortpwdClose(val){
            
            this.isShow = false;
            if(val){ 
                this.paypassword = val;
                this.$toast.text(this.$t('PayPassword.zcsrqrmm'));
                setTimeout(this.showShortpwd2,1000)
            }
            return
            
            
        },
        shortpwdClose2(val){
            
            this.isShow2 = false;
            if(val){
                this.paypassword1=val;
                this.handleClickSave();
            };
        },
        showShortpwd(){
            this.isShow = true;   
        },
        showShortpwd2(){
            this.isShow2 = true;
        },
        

        handleClickSave(){
            


            if(this.paypassword !== this.paypassword1&&this.paypassword){
                this.$toast.fail('2次输入的支付密码不相同');
                return
            }
            if(!this.password){
                this.$toast.fail(this.$t('PayPassword.qsrndmm'));
                return
            }
            let data = {
                password:this.password,
                pay_password:this.paypassword
            }
            this.loading = true;
            let loading = this.$toast.loading();
            this.$axios.post(this.$api_url.save_paypassword,
                this.$qs.stringify(data)
            ).then((res)=>{
                if(res.data.code == 0){
                    
                    this.$toast.success(res.data.msg);
                    this.getData();
                } else{
                    this.$toast.fail(res.data.msg);
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
                loading.hide();
                this.loading = false;
            })
        },
        getData(){
            this.loading =  true;
            this.$axios.get(this.$api_url.has_paypassword).then((res)=>{
                console.log(res);
                if(res.data.code == 0){
                    this.haspasswrod = false
                }else{
                    this.haspasswrod = true
                }
            }).catch((err)=>{
                this.$toast.fail(err.message);
            }).then(()=>{
               this.loading = false;
            });
        },
    },
    mounted() {
      this.getData();
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .bink_card_ul li input.n_password{
        width:10%;
        text-align: center;
        border: 1px solid black;
    }


    
  .page-box{
    padding-top:1.5rem;
    padding-bottom: 1rem;
    text-align: left;
  }
  .bink_card h3{
    padding: 0 .16rem;
    background-color: #eee;
    font-size: .36rem;
    line-height: 1rem;
    color: #333;
  }
  .bink_card_ul li{
    background-color: #fff;
    padding: 0 .56rem;
    overflow: hidden;
  }
  .bink_card_ul li h4{
    float: left;
    font-size: .373333rem;
    line-height: 1.173333rem;
    color: #999;
    width: 100%;
  }
  .bink_card_ul li input{
    float: left;
    
    font-size: .373333rem;
    line-height: 1.173333rem;
    color: #666;
    outline-style: none;
    border: 0;
  }
  .btn{
    font-size: .426667rem;
    line-height: 1.12rem;
    border-radius: .106667rem;
    background-color: #2f3848;
    color: #fff;
    width: 90%;
    text-align: center;
    display: block;
    margin: 0 auto;
    margin-top: .666667rem;
  }
  .btn:disabled{
    background: #ccc;
  }
  
</style>
